<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>考试</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <script language="javascript" type="text/javascript" src="My97DatePicker/My97DatePicker/WdatePicker.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
    <script>
        // 获取分页数据
        $(function () { // DOM 加载完毕默认要执行的函数
            $.ajax({
                url:"kaoshi/zidian",
                data:"pn=1",
                type:"get",
                success:function (result) {
                    console.log(result)
                    $("#currentPage").text(result.pageNum);
                    $("#pages").text(result.pages);
                    $("#total").text(result.total);
                    // 1、解析并显示员工数据
                    buildUsersTab(result);
                    // 2、解析显示分页信息
                    buildNavTab(result);
                }
            });
        })

        // 获取第几页的数据
        function toPage(pn) {
            console.log("获取第" + pn  + "页数据");
            $.ajax({
                url: "kaoshi/zidian",
                data: "pn="+pn,
                type:"GET",
                success:function (result) { // 这里面是不是就包括有当前页是第几页
                    // console.log("第" + pn +"页数据",result)
                    // 重新构建数据table
                    buildUsersTab(result);
                    // 重新构建分页条
                    buildNavTab(result);
                    // 更新表格左下角的页码
                    updateCurrentPage(result.pageNum);
                }
            });
        }

        function updateCurrentPage(pageNum) {
            $("#currentPage").text(pageNum);
        }

        // 构建分页条
        function buildNavTab(result) {

            // $("#userstab tbody").empty(); // 这个是去掉表格数据
            $("#pnav").empty();
            console.log(result.hasPreviousPage+ "---",result);
            var ul = $("<ul></ul>").addClass("pagination")
            var firstPageLi = $("<li></li>").append($("<a onclick='toPage(1)'></a>").append("首页").attr("href","#"));
            var prePageLi;
            var nexPageLi;
            if (!result.hasPreviousPage) {
                prePageLi = $("<li></li>").addClass("disabled").append($("<a onclick='toPage("+(result.pageNum-1)+")'></a>").append("&laquo;").attr("href","#")); // 上一页
            } else {
                prePageLi = $("<li></li>").append($("<a onclick='toPage("+(result.pageNum-1)+")'></a>").append("&laquo;").attr("href","#")); // 上一页
            }
            if (!result.hasNextPage) {
                nexPageLi = $("<li></li>").addClass("disabled").append($("<a onclick='toPage("+(result.pageNum+1)+")'></a>").append("&raquo;").attr("href","#")); // 下一页
            } else {
                nexPageLi = $("<li></li>").append($("<a onclick='toPage("+(result.pageNum+1)+")'></a>").append("&raquo;").attr("href","#")); // 下一页
            }

            var lastPageLi = $("<li></li>").append($("<a onclick='toPage("+result.pages+")'></a>").append("尾页").attr("href","#"));
            ul.append(firstPageLi).append(prePageLi);
            // 遍历总的页数
            $.each(result.navigatepageNums,function (index,item){ // item 是分页条上的页码
                // 选中页要成为激活状态active
                var numli;
                if (result.pageNum == item) { // 后台返回的数据显示在表格里的页的数据（有个第几页） == 当前点的页码
                    numli = $("<li></li>").addClass("active").append($("<a onclick='toPage("+item+")'></a>").append(item));
                } else {
                    numli = $("<li></li>").append($("<a onclick='toPage("+item+")'></a>").append(item));
                }
                ul.append(numli);
            });


            ul.append(nexPageLi).append(lastPageLi);
            var nav = $("<nav></nav>").append(ul);
            nav.appendTo("#pnav");
        }

        function buildUsersTab(obj) {
            $("#userstab tbody").empty();
            // 得到obj中的LIST
            var users = obj.list;

            // users：遍历的集合list
            // item：每一条数据
            console.log(users)
            $.each(users, function (index, item) {
                var check=$("<td><input type='checkbox' name='chk' value='"+item.id+"'></td>")
                var id = $("<td></td>").append(item.id);
                var name = $("<td></td>").append(item.name);
                var type = $("<td></td>").append(item.type);
                var statu = $("<td></td>").append(item.statu);
                var detail = $("<td></td>").append(item.detail);
                var createtime = $("<td></td>").append(item.createtime);
                var delBtn = $("<td></td>").append($("<button type='button' class='btn btn-danger' onclick='deleteByid("+item.id+")'>删除</button>"));
                var editBtn = $("<td></td>").append($("<button type='button' class='btn btn-info' data-toggle='modal' data-target='#changemyModal' onclick='changeinfo("+JSON.stringify(item)+")'>编辑</button>"));
                var btnId=$("<td></td>").append(delBtn).append(editBtn);

                $("<tr></tr>")
                    .append(check)
                    .append(id)
                    .append(name)
                    .append(type)
                    .append(statu)
                    .append(detail)
                    .append(createtime)
                    .append(btnId)
                    .appendTo("#userstab tbody");
            });
        }
        function s(ziname,zitype,zistatu,zitime1,zitime2){
            var ziname=$("#ziname").val().trim();
            var zitype=$("#zitype").val().trim();
            var zistatu=$("#zistatu").val().trim();
             var zitime1=$("#zitime1").val().trim();
             var zitime2=$("#zitime2").val().trim();

            $.ajax({
                url:"kaoshi/zidianser",
                data: { ziname:ziname,
                        zitype:zitype,
                        zistatu:zistatu,
                        zitime1:zitime1,
                        zitime2:zitime2,

                },
                type:"get",
                contentType:"text",
                dataType: "JSON",
                success:function (item){
                    $("#userstab tbody").empty();
                    for(var i=0;i<item.length;i++){
                        var check=$("<td><input type='checkbox' name='chk' value='"+item.id+"'></td>")
                        var id = $("<td></td>").append(item[i].id);
                        var name = $("<td></td>").append(item[i].name);
                        var type = $("<td></td>").append(item[i].type);
                        var statu = $("<td></td>").append(item[i].statu);
                        var detail = $("<td></td>").append(item[i].detail);
                        var createtime = $("<td></td>").append(item[i].createtime);
                        var delBtn = $("<td></td>").append($("<button type='button' class='btn btn-danger' onclick='deleteByid("+item[i].id+")'>删除</button>"));
                        var editBtn = $("<td></td>").append($("<button type='button' class='btn btn-info' data-toggle='modal' data-target='#changemyModal' onclick='changeinfo("+JSON.stringify(item[i])+")'>编辑</button>"));
                        var btnId=$("<td></td>").append(delBtn).append(editBtn);

                        $("<tr></tr>")
                            .append(check)
                            .append(id)
                            .append(name)
                            .append(type)
                            .append(statu)
                            .append(detail)
                            .append(createtime)
                            .append(btnId)
                            .appendTo("#userstab tbody");

                    }


                },
                complete:function(res){
                    alert("查不了")

                }


            })

        }
        function u(event){
            $.ajax({
                url:"kaoshi/zidian",
                data:"pn=1",
                type:"get",
                success:function (result) {
                    console.log(result)
                    $("#currentPage").text(result.pageNum);
                    $("#pages").text(result.pages);
                    $("#total").text(result.total);
                    // 1、解析并显示员工数据
                    buildUsersTab(result);
                    // 2、解析显示分页信息
                    buildNavTab(result);
                }
            });

        }
        function getinfo(){

            let datas= {
                name:document.getElementById("name").value,
                type:document.getElementById("type").value,
                statu:document.getElementById("statu").value,
                detail:document.getElementById("detail").value,
                createtime:document.getElementById("createtime").value,

            }
            console.log(datas)
            $.ajax({
                url:"kaoshi/inszidian",
                data:JSON.stringify(datas),
                type:"post",
                contentType:"application/json;charset=utf-8",
                success: function (res) {
                    console.log(res)
                    if (res == "Y") {
                        alert("编辑成功")
                    } else {
                        alert("编辑失败")
                    }
                }

            });

        }
        function changeinfo(item){
            document.getElementById("value1").value=item.id;
            document.getElementById("value2").value=item.name;
            document.getElementById("value3").value=item.type;
            document.getElementById("value4").value=item.statu;
            document.getElementById("value5").value=item.detail;
            document.getElementById("value6").value=item.createtime;


        }
        function saveData(){
            let user={
                id:document.getElementById("value1").value,
                name:document.getElementById("value2").value,
                type:document.getElementById("value3").value,
                statu:document.getElementById("value4").value,
                detail:document.getElementById("value5").value,
                createtime:document.getElementById("value6").value,

            }
            console.log(JSON.stringify(user))
            $.ajax({
                url:"kaoshi/zidiansave",
                data: JSON.stringify(user),
                method:"POST",
                contentType:"application/json;charset=utf-8",
                success:function (res){
                    console.log(res)
                    if(res=="Y"){
                        alert("成功")
                    }else{
                        alert("失败")
                    }

                },

            })

        }
        function deleteByid(id){
            $.ajax({
                url:"kaoshi/zidiandel",
                data:{
                    id:id
                },
                type:"post",
                success:function (res){
                    if (res=="Y"){
                        alert("删除成功！")
                    }else {
                        alert("删除失败！")
                    }
                }

            })
        }
        function reverseSelect(){
            let chks =document.getElementsByName("chk");
            for(var i=0;i<chks.length;i++){
                chks[i].checked=! chks[i].checked
            }


        }
        function delmany(){
            let chks =document.getElementsByName("chk");
            var temp="";
            for(var i=0;i<chks.length;i++){
              if(chks[i].checked){
                  temp+=chks[i].value+","
              }

            }
            var resultchk=temp.substring(0,temp.length-1)
            var ids = resultchk.split(',').map(Number);
            console.log(JSON.stringify(ids))
           $.ajax({
               url:"kaoshi/delmany",
               data: JSON.stringify(ids),

               method:"post",
               contentType:"application/json;charset=utf-8",
               success:function (res){
                   if (res=="Y"){
                       alert("删除成功！")
                   }else {
                       alert("删除失败！")
                   }
               },

           })

        }
    </script>
</head>
<body>
字典名称:<input type="text" id="ziname"  >
字典类型：<input type="text" id="zitype"  >
字典状态：<input type="text" id="zistatu"  >
创建时间：<input id="zitime1" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" placeholder="开始时间"/>
-
<input id="zitime2" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" placeholder="结束时间"/>
<button type="button" class="btn btn-primary" onclick="s()">搜索</button>
<button type="button" class="btn btn-warning" onclick="u()">重置</button><br>
<button type="button" class="btn btn-primary " data-toggle="modal" data-target="#myModal">
    新增
</button>
<a class="btn btn-primary" href="kaoshi/exceldownload">导出</a>
<button type="button" class="btn btn-danger" onclick="delmany()">批量删除</button>
<table class="table table-bordered" id="userstab">

    <thead>
    <th ><input type="checkbox" onclick="reverseSelect()"></th>
    <th>序号</th>
    <th>字典名称</th>
    <th>字典类型</th>
    <th>状态</th>
    <th>备注</th>
    <th>创建时间</th>
    <th>操作</th>

    </thead>
    <tbody>
    <tr></tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3">
            当前<span id="currentPage"></span>页，共有<span id="pages"></span>页，共有<span id="total"></span>条数据

        </td>
        <td colspan="5" align="center">

            <nav aria-label="Page navigation" id="pnav">
                <ul class="pagination">
                    <li class="disabled">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li class="active"><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </td>
    </tr>
    </tfoot>
</table>
<!-- 添加Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加</h4>
            </div>
            <div class="modal-body">
                字典名称：<input type="text" id="name"><br>
                字典类型：<input type="text" id="type"><br>
                状态：<input type="text" id="statu"><br>
                备注：<input type="text" id="detail"><br>
                创建时间：<input id="createtime" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" />


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary"  onclick="getinfo()">提交</button>
            </div>
        </div>
    </div>
</div>
<!-- 编辑Modal -->
<div class="modal fade" id="changemyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="changemyModalLabel">修改</h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="value1">
                字典名称：<input type="text" id="value2"><br>
                字典类型：<input type="text" id="value3"><br>
                状态：<input type="text" id="value4"><br>
                备注：<input type="text" id="value5"><br>
                创建时间：<input id="value6" type="text" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" /><br>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary"  onclick="saveData()">保存更改</button>
            </div>
        </div>
    </div>
</div>


</body>
</html>